<template>
  <div class="frist">
    <van-row class="title">
      <van-col span="24">
        <p>请输入一个数字n:</p>
      </van-col>
    </van-row>
    <van-row class="input-wrapper">
      <van-col span="24">
        <el-input v-model.number="n" type="number" placeholder="输入数字" />
      </van-col>
    </van-row>
    <van-row class="button-wrapper">
      <van-col span="24">
        <el-button type="primary" @click="calculateOddSum">计算奇数和</el-button>
      </van-col>
    </van-row>
    <van-row class="result-wrapper">
      <van-col span="24">
        <p class="result">1到{{ n }}的奇数和是: {{ oddSum }}</p>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElInput, ElButton } from 'element-plus';
import { Row, Col } from 'vant';

const props = defineProps({
  oddSum: Number
});

const emit = defineEmits(['update:oddSum']);
const n = ref(null);
const oddSum = ref(0);

const calculateOddSum = () => {
  if (n.value === null || !Number.isInteger(n.value) || n.value < 1) {
    alert('请输入一个正整数！');
    return;
  }
  let sum = 0;
  for (let i = 1; i <= n.value; i++) {
    if (i % 2 !== 0) {
      sum += i;
    }
  }
  oddSum.value = sum;
  emit('update:oddSum', sum);
};
</script>

<style scoped>
.frist {
  font-family: Arial, sans-serif;
  max-width: 50vw; 
  margin: 2.5vh auto;
  padding: 2.5vh;
  background-color: #f9f9f9;
  border-radius: 1vw; 
  box-shadow: 0 0.25vh 0.5vh rgba(0, 0, 0, 0.1); 
  text-align: center;
}

.van-field__control {
  text-align: center;
}

button {
  margin-top: 2.5vh; 
}

.result {
  font-size: 2.25vw; 
  font-weight: bold;
  color: #333;
  margin-bottom: 1.25vh;
}

.title, .input-wrapper, .button-wrapper, .result-wrapper {
  padding: 1.875vh 0; 
}

@media (max-width: 768px) {
  .van-row {
    flex-direction: column;
  }
}
</style>